{% load jsonify %}
{% load static %}

<!DOCTYPE html>
<html lang="zh-CN">
 
    <head>
        <meta charset='utf-8' />
        <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <!--<script src="http://cdn.bootcss.com/vue/1.0.26/vue.min.js"></script>-->
        <script src="http://cdn.bootcss.com/vue/2.0.6/vue.js"></script>
        <!--<script src="//cdn.bootcss.com/vue/2.0.5/vue.min.js"></script>-->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	    <link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
	    <script src='{% static "js/exfun.js" %}'></script>
	    <script src='{% static "js/fields.pack.js" %}'></script>
	    <script type="text/javascript">
	    zk_list={{ zk_list | jsonify }} 
	    car_list={{ car_list | jsonify }}
	    url_root='{{ url_root }}'
	    	$(function(){
	    		new Vue({
	    			el:'#there',
	    			data:{
	    				zk_list:zk_list,
	    				selected_zk:zk_list.length!=0 ? zk_list[0].no :'',
	    				car_list:car_list,
	    				selected_exist_car:'',
	    				input_car:'',
	    				crt_session:'',
	    				qr_key:'',
	    				wash_state:'',


	    			},
	    			methods:{
	    				zk_qr:function(){
		    				var content=btoa(ex.template('http://wx.uacar.cn/experience/index.php?zkcode={zk_code}',{zk_code:this.selected_zk}))
							return ex.template('{url_root}/qr/{content}?encode=base64',{content:content,url_root:url_root})
	    				},
	    				new_session:function(){
	    					var self=this
	    					var selected_car=''
	    					if(this.selected_exist_car){
	    						selected_car = this.selected_exist_car
	    					}else{
	    						selected_car=this.input_car
	    					}
	    					var url=encodeURI(ex.template('/zk/new_session/?chepai={car}&zk={zk}',{car:selected_car,zk:this.selected_zk}))
	    					show_upload()
	    					$.get(url,function(data){
	    						if(data.msg){
	    							alert(data.msg)
	    						}
	    						if(data.status=='success'){
	    							self.crt_session=data.session
	    							self.wash_state='ting_che_dao_wei'
	    						}
	    						hide_upload(500)
	    					})
	    				},
	    				submit_qr_key:function(){
	    					var self=this
	    					var url=ex.template('/zk/new_session/?order_key={qr_key}&zk={zk}',{qr_key:this.qr_key,zk:this.selected_zk})
	    					show_upload()
	    					$.get(url,function(data){
	    						if(data.msg){
	    							alert(data.msg)
	    						}
	    						if(data.status=='success'){
	    							self.crt_session=data.session
	    							self.wash_state='ting_che_dao_wei'
	    						}
	    						hide_upload(500)
	    						
	    					})
	    				},
	    				ting_che_dao_wei:function(){
	    					var self=this
	    					var url=ex.template('/zk/washstate?zk={zk}&state={state}&session={session}',{
	    							zk:this.selected_zk,
	    							state:17001,
	    							session:this.crt_session,
	    					})
	    					show_upload()
	    					$.get(url,function(data){
	    						if(data.status=='success'){
	    							self.wash_state='xi_che_zhong'
	    						}
	    						hide_upload(500)
	    					})
	    				},
	    				xi_che_zhong:function(){
	    					var self=this
	    					var url=ex.template('/zk/washstate?zk={zk}&state={state}&session={session}',{
	    							zk:this.selected_zk,
	    							state:20001,
	    							session:this.crt_session,
	    					})
	    					show_upload()
	    					$.get(url,function(data){
	    						if(data.status=='success'){
	    							self.wash_state='xi_che_wan_cheng'
	    						}
	    						hide_upload(500)
	    					})
	    				},
	    				xi_che_wan_cheng:function(){
	    					var self=this
	    					var url=ex.template('/zk/washstate?zk={zk}&state={state}&session={session}',{
	    							zk:this.selected_zk,
	    							state:17002,
	    							session:this.crt_session,
	    					})
	    					show_upload()
	    					$.get(url,function(data){
	    						if(data.status=='success'){
	    							self.wash_state=''
	    						}
	    						hide_upload(500)
	    					})
	    				}

	    			}
	    			
	    		})
	    	})
	    </script>

    </head>

   
    <body>
	    <div class='main-content well well-lg' id='there'>
		    <div class='unit zk'>
			    <h3>中控选择</h3>
			    <div class='sel'>
			    	<select v-model='selected_zk'><option v-for='zk in zk_list' 
			    		:value='zk.no' v-text='zk.name'></option></select>
			    </div>
			    <div class='qr'>
			    	<img :src="zk_qr()">
			    </div>
		    </div>

		    <div class="">
		    	<div class="element unit">
			    	<h3>车牌扫描</h3>
			    	<div>
			    		<input type="text" name="" placeholder="输入车牌" v-model='input_car'>
			    		<select v-model='selected_exist_car' >
			    			<option value=''>---</option>
			    			<option v-for='car in car_list' :value='car.car_no' v-text='car.car_no'></option>
			    		</select>
			    		<button  type="button" class="btn btn-info" @click='new_session()' 
			    			:disabled="!(input_car || selected_exist_car)">扫描</button>
			    	</div>
			    </div>
			    <div class="element unit">
			    	<h3>二维码</h3>
			    	<div>
			    		<input type="text" name="" placeholder="输入扫描得到的二维码key" v-model='qr_key'>
			    		<button  type="button" class="btn btn-info" @click='submit_qr_key()' :disabled="!qr_key">确定</button>
			    	</div>
			    </div>
		    </div>
		    

		    <div class="unit">
		    	<h3>洗车状态</h3>
		    	<div v-text='crt_session'></div>
		    	<div>
		    		<button type="button" :class="['btn',wash_state=='ting_che_dao_wei'?'btn-success':'btn-default'] " 
		    			:disabled="wash_state!='ting_che_dao_wei'" @click='ting_che_dao_wei()'>洗车到位</button>
		    		<button type="button" :class="['btn',wash_state=='xi_che_zhong'?'btn-success':'btn-default'] " :disabled='wash_state!="xi_che_zhong"' @click='xi_che_zhong()'>洗车中</button>
		    		<button type="button" :class="['btn',wash_state=='xi_che_wan_cheng'?'btn-success':'btn-default'] " :disabled='wash_state!="xi_che_wan_cheng"' @click='xi_che_wan_cheng()'>洗车完成</button>
		    	</div>
		    </div>
	    </div>
    </body>

<style type="text/css" media="screen" id="test">
	.main-content{
		width:1200px;
		min-height:500px;
		margin: auto;
		
	}
	.unit{
		background-color: #FdFdFd;
		border-radius: 3px;
		border: 1px solid #D1D1D1;
		padding: 20px;
		margin: 10px 0px;


	}
	.unit.element{
		display: inline-block;
		width: 49%;
		
	}
	.zk .sel{
		display: inline-block;
	}
	.zk .qr{
		display: inline-block;
		
		margin-left: 120px;
	}
	.zk .qr img{
		width:200px;
	}
</style>

    
</html>